<script setup lang="ts">
import { onMounted, ref} from 'vue';
import { getData, data, addData, deleteData, updateData } from '@/scripts/api'

const searchBook = ref('')
onMounted(
    () => {
        getData();
    }
);
</script>

<template>
    <div w-full flex-justify-center>
        <h1 text-center font-bold > 这是一个标题</h1>
        <el-table :data="data.books" stripe style="width: 100%">
            <el-table-column prop="bookId" label="编号" width="180"></el-table-column>
            <el-table-column prop="bookTitle" label="书名" width="180"></el-table-column>
            <el-table-column prop="bookAuthor" label="作者" width="180"></el-table-column>
            <el-table-column prop="bookPrice" label="价格"></el-table-column>
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="searchBook" size="small" placeholder="Type to search" />
                </template>
                <template #default="scope">
                    <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        Edit
                    </el-button> -->
                    <el-button size="small" style="color:#ff0000;" type="danger" @click="deleteData(scope.row.bookId)">
                        Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div flex-justify-center>
            <el-button @click="getData">查阅书籍</el-button>
            <el-button @click="addData( {bookId:22, bookTitle: 'The Great Gatsby', bookAuthor: 'F. Scott Fitzgerald', bookPrice: 19.99} )">
                添加记录
            </el-button>
            <el-button @click="deleteData(22)">
                删除记录
            </el-button>
            <el-button  @click="updateData(22, {bookTitle: 'new book22',bookAuthor: 'new author22',bookPrice: 222.1})">
                更新记录
            </el-button>
        </div>
    </div>
</template>

<style scoped>
 /* a {
  color: #42b983;
 } */
</style>
<!-- @/ts/api.js@/ts/api.js -->